<template>
	<view class="result-container">
		<view class="cards">
			<view class="progress">
				<l-circle v-model:current="modelVale" :percent="target" :strokeColor="color" :strokeWidth="10" :trailWidth="10">
				    <text>{{modelVale}}</text>
				</l-circle>
			</view>
			<view class="answers">
				<view class="flexd">
					<image src="/static/dadui.png" mode=""></image>
					<text>答对数：{{ dui }}  / {{ total }}</text>
				</view>
				<view class="flexd">
					<image src="/static/yida.png" mode=""></image>
					<text>已答数：{{ wei }} / {{ total }}</text>
				</view>
			</view>
		</view>
		<view class="dacard">
			<view class="topcard">
				<view class="titles"> 答题卡 </view>
				<view class="tages">
					<view class="tag"> 
						<view class="tips dui"> </view>
						<view class="tipstxt"> 答对 </view>
					</view>
					<view class="tag"> 
						<view class="tips cuo"> </view>
						<view class="tipstxt"> 答错 </view>
					</view>
					<view class="tag"> 
						<view class="tips wei"> </view>
						<view class="tipstxt"> 未答 </view>
					</view>
				</view>
			</view>
			<view class="contents">
				<view class="timu" v-for="(item,idx) in questionList" @click="analysis(item)">
					<view class="nums dui" v-if="item.answer.is_correct == 1"> {{ idx + 1 }} </view>
					<view class="nums cuo" v-if="item.answer.is_correct == 0"> {{ idx + 1 }} </view>
					<view class="nums wei" v-if="item.answer.is_correct == 2"> {{ idx + 1 }} </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseURL: getApp().globalData.baseUrl,
				appid: uni.getStorageSync('appid'),
				questionList: [ ],
				target:  0,
				modelVale: 0,
				color: "#EB6E30",
				wrongs : 0,
				wei: 0,
				total: 0,
				dui: 0,
				answer_model: ''
			}
		},
		onLoad(options){
			this.getScore(options.paper_id)
			this.getResult(options.paper_id)
		},
		methods: {
			handleBack() {
				uni.switchTab({
					url: '/pages/user/user'
				})
			},
			getScore(paper_id){
				var answer_model = uni.getStorageSync('answer_model')
				uni.request({
					url: this.baseURL + '/api/paper/paperResult',
					method: 'POST',
					data: {appid: this.appid,paper_id:paper_id,answer_model: answer_model },
					header: { 'Content-Type': 'application/json' },
					success: (res) => {
						console.log("res.data.data",res.data.data)
						this.target = this.modelVale = res.data.data.score
						this.wrongs = res.data.data.wrong
						this.dui    = res.data.data.correct ? res.data.data.correct  : 0
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				})
			},
			getResult(paper_id){
				var answer_model = uni.getStorageSync('answer_model')
				console.log("answer_model",answer_model)
				uni.request({
					url: this.baseURL + '/api/paper/answerSheet',
					method: 'POST',
					data: {appid: this.appid,paper_id:paper_id,answer_model: answer_model },
					header: { 'Content-Type': 'application/json' },
					success: (res) => {
						console.log("record",res.data.data)
						this.questionList = res.data.data
						this.total = res.data.data.length;
						var record = res.data.data
						var wei = 0
						for( var i=0;i<record.length;i++ ){
							record[i].type = 0
							if( record[i].answer ){
								if( record[i].answer.is_correct == 1 ){
									record[i].type = 1
								}
							} else {
								wei++
								record[i].type = 2
							}
						}
						this.wei = this.total - wei
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				})
			},
			analysis(item){
				if( item.answer ){
					uni.setStorageSync('timu',item.answer)
				} else {
					var timu  = JSON.parse(item.question_data)
					uni.setStorageSync('timu',timu)
				}
				uni.navigateTo({url: '/pages/question/answer_ti'})
			}
		}
	}
</script>

<style>
	.result-container {height: 100vh;}
	.cards{width: 90%;border: 1rpx solid #efefef;border-radius: 10rpx;margin: 30rpx auto;height: 300rpx;box-shadow: 0 5rpx 5rpx 5rpx #989898;display: flex;flex-direction: row;}
	.progress{padding: 30rpx;width: 40%;}
	.answers{display: flex;flex-direction: column;justify-content: center;}
	.flexd{text-align: left;padding-top: 20rpx;display: flex;flex-direction: row;}
	.flexd image{width: 40rpx;height: 40rpx;}
	.flexd text{display: block;line-height: 40rpx;margin-left: 10rpx;font-size: 30rpx}
	.dacard{padding-top: 50rpx;}
	.topcard{width: 90%;margin: 30rpx auto;display: flex;flex-direction: row;justify-content: space-between;}
	.titles{font-size: 36rpx;font-weight: bold;}
	.tages{display: flex;flex-direction: row;justify-content: center;}
	.tag{display: flex;flex-direction: row;align-items: center;margin-left: 10rpx;}
	.tips{width: 20rpx;height: 20rpx;border-radius: 20rpx;}
	.tipstxt{margin-left: 10rpx;font-size: 30rpx;}
	.dui{background-color: #34C6B3;}
	.cuo{background-color: #C65934;}
	.wei{background-color: #7D7A79;}
	.contents{display: flex;flex-wrap: wrap;justify-content: flex-start;padding-bottom: 20rpx;}
	.timu{flex: 0 0 20%;margin-top: 20rpx;}
	.nums{width: 80rpx;height: 80rpx;border-radius: 80rpx;color: #fff;text-align: center;line-height: 80rpx;margin: 0 auto;}
</style>